<template>
	<view class="content order">
		<view v-for="(item, index) in list" :key="item.id" class="order-card">
			<view class="order-card-header">
				<view class="title">{{ item.product.title }}</view>
				<view class="status">
					<view class="status-price">{{ item.totalAmount }} 元</view>
					<view class="status-info">
						{{ item.status | statusFilter(item.exp) }}
					</view>
				</view>
			</view>
			<view class="order-card-time">{{ item.createTime }}</view>
			<view class="order-card-validity">{{ item.exp }}</view>
			<view class="order-card-wildcard">{{ item.commonName }}</view>
			<view class="order-card-btn">
				<template v-if="item.status === 0">
					<button
						type="primary"
						style="
							margin: 0 8px 0 0;
							padding: 0 24px;
							background-color: #e84118;
						"
						@click="onCancel(item.id, index)"
					>
						取消支付
					</button>
					<button
						type="primary"
						style="margin: 0; padding: 0 24px; background-color: #007aff"
						@click="onPlay(item, index)"
					>
						支付
					</button>
				</template>
				<button
					v-if="[3].includes(item.status)"
					type="primary"
					style="margin: 0; padding: 0 24px; background-color: #007aff"
					@click="onDownload(item.id, index)"
				>
					下载
				</button>
				<button
					v-if="[1, 2].includes(item.status)"
					type="primary"
					style="margin: 0; padding: 0 24px; background-color: #007aff"
					@click="onClick(item.id)"
				>
					域名验证
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
import {
	getOrderList,
	cancelPay,
	certificatesDownload
} from '../../../api/order/index.js'
import { pay } from '../../../utils/index.js'
import { toast } from '../../../utils/native/index.js'
export default {
	data() {
		return {
			list: []
		}
	},

	filters: {
		statusFilter(value, exp) {
			const text = {
				0: '未支付',
				1: '验证中',
				2: '验证中',
				3: '有效期内',
				4: '已经到期',
				5: '取消支付'
			}[value]
			if (new Date(exp).getTime() < new Date().getTime()) {
				return '已经到期'
			}
			return text
		}
	},

	computed: {
		...mapState('user', ['userInfo'])
	},

	methods: {
		onClick(id) {
			uni.navigateTo({
				url: `/pages/index/verification/verification?id=${id}`
			})
		},

		onDownload(id, index) {
			certificatesDownload(id).then((data) => {
				console.log(data)
				if (data) {
					this.list[index].status = data.status
					toast('证书已到期')
				} else {
					toast(`已发送至${this.userInfo.email}邮箱`)
				}
			})
		},

		onCancel(id, index) {
			uni.showModal({
				title: '温馨提示',
				content: '是否取消支付？',
				success: (res) => {
					if (res.confirm) {
						cancelPay(id).then((data) => {
							console.log(this.list[index], data)
							this.list[index].status = data.status
						})
					}
				}
			})
		},

		onPlay(item, index) {
			const payInfo = JSON.parse(item.payInfo)
			pay(payInfo, () => {
				this.list[index].status = 1
			})
		}
	},

	created() {
		getOrderList().then((data) => {
			this.list = data
		})
	},

	onPullDownRefresh() {
		getOrderList().then((data) => {
			this.list = data
			uni.stopPullDownRefresh()
		})
	}
}
</script>

<style lang="scss" scoped>
.order {
	&-card {
		background-color: white;
		padding: 16px;
		border-radius: 8px;
		font-size: 14px;

		&-header {
			display: flex;
			justify-content: space-between;

			.title {
				font-weight: bold;
				flex: 1;
			}

			.status {
				&-price {
					font-size: 20px;
					font-weight: bold;
				}

				&-info {
					color: crimson;
				}
			}
		}

		&-time {
			color: #999;
			font-size: 12px;
		}

		&-validity {
			margin: 4px 0;
		}

		&-btn {
			width: 100%;
			margin-top: 4px;
			display: flex;
			justify-content: flex-end;
		}
	}

	&-card + &-card {
		margin-top: 16px;
	}
}
</style>
